<template>
    <div class="navbar">
      <div class="logo">
        <img src="@/images/bili.png" />
      </div>
      <div>
        <p>
          <van-icon class="ca_icon" name="search"></van-icon>
          郭敬明只有150cm?是真是假？
        </p>
      </div>
      <div>
        <img class="imgUrl" :src="imgUrl" @click="$router.push('/edit')" v-if="imgUrl" />
        <img class="imgUrl" src="../../images/userimg.jpg" @click="$router.push('/login')" v-else/>
        <p>下载App</p>
      </div>
    </div>
</template>

<script>

    export default {
        name: "Navbar",
        data() {
            return {
              imgUrl:''
            }
        },
        methods: {

        },
      async mounted(){
          if (localStorage.getItem('token')){
            const res = await this.$http.get('/user/' + localStorage.getItem('id'))
            this.imgUrl = res.data[0].user_img
          }
        }
    }
</script>
<style scoped lang="less">
  .navbar{
    display: flex;
    height: 12.5vw;
    background-color: white;
    .logo{
      width: 30vw;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      img{
        width: 80%;
      }

    }
    div:nth-child(2){
      flex: 1;
      display: flex;
      align-items: center;
      width: 100%;
      p{
        background-color: #f4f4f4;
        padding: 1vw 0;
        width: 90%;
        border-radius: 10px;
        color: rgb(153,153,153);
        font-size: 3vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        .ca_icon{
          color: rgb(153,153,153);
          transform: translate(30%,20%);
          margin-right: 1vw;
        }
      }
    }
    div:nth-child(3){
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 8vw;
        height: 8vw;
        border-radius: 50%;
      }
      p{
        height: 60%;
        border-radius: 1vw;
        margin: auto;
        background-color: #fb7299;
        font-size: 3vw;
        padding: 0 2vw;
        line-height: 7.5vw;
        color: white;
        width: 30vw;
        text-align: center;
      }
    }
  }
</style>
